<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import {
  ElSelect,
  ElOption,
  ElButton,
  ElInput,
  ElCard,
  ElMessage,
  ElTabs,
  ElTabPane,
  ElSwitch
} from 'element-plus';
import { usePromptStore } from '../stores/promptStore';

const promptStore = usePromptStore();
const currentGroupId = ref(promptStore.userSettings?.selectedGroupId || '');
console.log('currentGroupId:', promptStore.userSettings);
// 复制提示词
const copyPrompt = async () => {
  const success = await promptStore.copyToClipboard();
  if (success) {
    ElMessage.success('提示词已复制到剪贴板');
  } else {
    ElMessage.error('复制失败，请重试');
  }
};

// 发送提示词到content script
const sendToContent = async () => {
  try {
    // 获取当前活动标签页
    const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
    
    if (tab.id) {
      // 向content script发送消息
      const response = await browser.tabs.sendMessage(tab.id, { 
        action: 'paste',
        content: promptStore.generatedPrompt 
      });
      console.log('content script response:', response);
      if (response?.status === 'success') {
        ElMessage.success('提示词已发送到页面');
      } else {
        ElMessage.error('发送失败：' + response?.message || '未知错误');
      }
    } else {
      ElMessage.error('无法获取当前标签页');
    }
  } catch (error) {
    console.error('发送消息失败:', error);
    ElMessage.error('发送失败，请确保页面已加载');
  }
};
</script>

<template>
  <div class="prompt-generator">
    <!-- 顶部操作栏 -->
    <div class="toolbar">
      <ElSelect 
        :model-value="promptStore.userSettings?.selectedGroupId" 
        @update:model-value="promptStore.setCurrentGroup"
        placeholder="选择要素组"
        style="flex: 1; margin-right: 8px;"
      >
        <ElOption
          v-for="group in promptStore.groups"
          :key="group.id"
          :label="group.name"
          :value="group.id"
        />
      </ElSelect>
      
      <ElSwitch
        :model-value="promptStore.userSettings.language"
        :active-value="'en'"
        :inactive-value="'cn'"
        active-text="EN"
        inactive-text="CN"
        size="small"
        @update:model-value="(val) => promptStore.setLanguage(val as 'cn' | 'en')"
      />
    </div>

    <!-- 要素输入区 -->
    <div class="elements-container" v-if="promptStore.currentGroup">
      <div
        v-for="element in promptStore.currentGroup.elements"
        :key="element.name_cn"
        class="element-item"
      >
        <div class="element-header">
          <h3 class="element-title">{{ promptStore.getElementName(element) }}</h3>
          <p class="element-description">{{ element.description }}</p>
        </div>
        
        <ElInput
          v-model="promptStore.elementValues[element.name_cn]"
          type="textarea"
          :rows="2"
          :placeholder="`请输入${promptStore.getElementName(element)}内容`"
          @input="(value) => promptStore.setElementValue(element.name_cn, value)"
          class="element-input"
        />
      </div>
    </div>

    <!-- 结果展示区 -->
    <div class="preview-container" v-if="promptStore.currentGroup">
      <div class="result-header">
        <h4>生成的提示词</h4>
        <div class="result-actions">
          <ElButton 
            type="primary" 
            size="small"
            @click="copyPrompt"
            :disabled="!promptStore.generatedPrompt"
          >
            复制
          </ElButton>
          <ElButton 
            type="success" 
            size="small"
            @click="sendToContent"
            :disabled="!promptStore.generatedPrompt"
          >
            发送
          </ElButton>
        </div>
      </div>
      
      <div class="markdown-preview">
        <pre>{{ promptStore.generatedPrompt }}</pre>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <p>请先选择或创建一个要素组</p>
    </div>
  </div>
</template>

<style scoped>
.prompt-generator {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 12px;
}

.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.elements-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.element-item {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 8px;
  background: #fafafa;
  transition: all 0.2s ease;
}

.element-item:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.element-header {
  margin-bottom: 6px;
}

.element-title {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 600;
  color: #303133;
}

.element-description {
  margin: 0;
  font-size: 11px;
  color: #909399;
  line-height: 1.4;
}

.element-input {
  margin-top: 4px;
}

.preview-container {
  border-top: 1px solid #e4e7ed;
  padding-top: 12px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.result-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.result-actions {
  display: flex;
  gap: 8px;
}

.markdown-preview {
  height: 120px;
  overflow-y: auto;
  background: #f8f9fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 8px;
}

.markdown-preview pre {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
</style>